<template>
  <PageWrapper>
    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="文档">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <CollapseContainer class="mt-5" title="computed-计算属性">
      <ol>
        <li>姓:{{ familyName }}<Button @click="changeFamilyName">修改</Button></li>
        <li>名:{{ name }}<Button @click="changeName">修改</Button></li>
        <li>只读 computed 姓-名:{{ fullNameReadOnly }}</li>
        <li>可写 computed 姓-名:{{ fullName }}<Button @click="changeFullName">修改</Button></li>
      </ol>
      <template #action>
        <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('深度引用', getSource())" />
      </template>
    </CollapseContainer>

    <!-- 源码组件 -->
    <SourceDrawer ref="sourceDrawer" />
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';
  import { PageWrapper } from '@/components/Page';
  import { Button } from '@/components/Button';
  import SourceDrawer from '@/learn/SourceDrawer.vue';
  import { Icon } from '@/components/Icon';
  // 需要引入 computed 方法
  import { ref, computed } from 'vue';

  // 定义子组件引用
  let sourceDrawer = ref<any>(null);
  function openSource(title: string, content: string) {
    sourceDrawer.value.open({ title, content, width: '60%' });
  }

  let familyName = ref<string>('zhang');
  let name = ref<string>('san');

  // 只读:computed
  let fullNameReadOnly = computed(() => {
    console.log('计算方法...');
    return familyName.value + '-' + name.value;
  });

  // 可编辑:
  let fullName = computed({
    get() {
      return familyName.value + '-' + name.value;
    },
    set(newVal) {
      let array = newVal.split('-');
      familyName.value = array[0];
      name.value = array[1];
    },
  });

  function changeFamilyName() {
    familyName.value = 'li';
  }
  function changeName() {
    name.value = 'si';
  }
  function changeFullName() {
    // 赋值语句会触发只读属性的 getter 函数
    fullName.value = 'wang-wu';
  }
</script>

<script lang="ts">
  function getDoc() {
    return `
### 计算属性
* 计算属性类似于方法，可以动态返回数据，实现数据实时变化
* 与方法不同的是，计算属性相当于有缓存，多次调用只会执行一次

`;
  }

  function getSource() {
    return `
\`\`\`html
<template>
  <CollapseContainer class="mt-5" title="computed-计算属性">
    <ol>
      <li>姓:{{ familyName }}<Button @click="changeFamilyName">修改</Button></li>
      <li>名:{{ name }}<Button @click="changeName">修改</Button></li>
      <li>只读 computed 姓-名:{{ fullNameReadOnly }}</li>
      <li>可写 computed 姓-名:{{ fullName }}<Button @click="changeFullName">修改</Button></li>
    </ol>
    <template #action>
      <Icon icon="ant-design:code-outlined" class="mr-1" :size="26" @click="openSource('深度引用', getDeep())" />
    </template>
  </CollapseContainer>
</template>

\<script lang="ts" setup\>
  // 需要引入 computed 方法
  import { ref, computed } from 'vue';

  // 定义子组件引用
  let sourceDrawer = ref<any>(null);
  function openSource(title: string, content: string) {
    sourceDrawer.value.open({ title, content, width: '60%' });
  }

  let familyName = ref<string>('zhang');
  let name = ref<string>('san');

  // 只读:computed
  let fullNameReadOnly = computed(() => {
    console.log('计算方法...');
    return familyName.value + '-' + name.value;
  });

  // 可编辑:
  let fullName = computed({
    get() {
      return familyName.value + '-' + name.value;
    },
    set(newVal) {
      let array = newVal.split('-');
      familyName.value = array[0];
      name.value = array[1];
    },
  });

  function changeFamilyName() {
    familyName.value = 'li';
  }
  function changeName() {
    name.value = 'si';
  }
  function changeFullName() {
    // 赋值语句会触发只读属性的 getter 函数
    fullName.value = 'wang-wu';
  }
\</script\>
\`\`\`
`;
  }
</script>

<style lang="less" scoped>
  button {
    margin-left: 5px;
  }
</style>
